<template>
	<view class="container" :style="$theme.pageStyle">
		<view class="userinfo-card">
			<view class="card-box">
				<view class="user-section">
					<view class="avatar-wrap">
						<image class="avatar" :src="User.avatar"></image>
					</view>
					<view class="portrait-box">
						<view class="info-box">
							<text class="username">{{User.nickname}}</text>
						</view>
						<view class="tuan">
							<view class="ma">邀请码：{{User.invite_code}}</view>
							<view class="fuzi" @click="copyHref()">复制</view>
						</view>
					</view>
				</view>
				<view class="balance-card-wrap">
					<view class="balance-card">
						<view class="tit">可提现金额(元)</view>
						<view class="xia">
							<view class="num">
								<text style="font-size: 40upx;">￥</text>{{User.user_money}}
							</view>
							<view @click="ToUrl('/distribution/user/cash')" class="withdraw-btn">立即提现</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="main">
			<view class="income-card" style="margin-top: 0upx;">
				<view class="tit" @click="goMyEarnings">
					<text>我的收益</text>
					<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/251713527545m2g6Mu.png"
						mode=""></image>
				</view>
				<view class="show-content">
					<view class="view-category">
						<view class="num"><text style="font-size: 24upx;">￥</text>{{Income.all}}</view>
						<view class="text">全部收益</view>
					</view>
					<view class="line"></view>
					<view class="view-category">
						<view class="num"><text style="font-size: 24upx;">￥</text>{{Income.z}}</view>
						<view class="text">直属收益</view>
					</view>
					<view class="line"></view>
					<view class="view-category">
						<view class="num"> <text style="font-size: 24upx;">￥</text>{{Income.fz}}</view>
						<view class="text">非直属收益</view>
					</view>
				</view>
			</view>


			<!-- 我的团队 -->
			<view class="income-card">
				<view class="tit" @click="ToUrl('/distribution/promoter-list/index')">
					<text>我的团队</text>
					<image src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/251713527545m2g6Mu.png"
						mode=""></image>
				</view>
				<view class="show-content">
					<view class="view-category">
						<view class="num">{{Team.all}}</view>
						<view class="text">全部成员</view>
					</view>
					<view class="line"></view>
					<view class="view-category">
						<view class="num">{{Team.down1}}</view>
						<view class="text">直属成员</view>
					</view>
					<!-- <view class="line"></view>
					<view class="view-category">
						<view class="num">{{Team.down2}}</view>
						<view class="text">非直属成员</view>
					</view> -->
				</view>
			</view>

			<view class="statistics" style="display: flex;">

				<view class="item mb acea-row row-column row-center-wrapper"
					@click="ToUrl('/distribution/order/index')">
					<view class="img">
						<image class="image"
							src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/231713527963zSSSfz.png"
							mode=""></image>
					</view>
					<view class="item-r">
						<view class="text">
							分销订单
						</view>
					</view>
				</view>

				<view class="item mb acea-row row-column row-center-wrapper"
					@click="ToUrl('/distribution/promoter-list/index')">
					<view class="img">
						<image class="image"
							src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/261713528206YkRPcm.png"
							mode=""></image>
					</view>
					<view class="item-r">
						<view class="text">
							我的客户
						</view>
					</view>
				</view>


				<view class="item mb acea-row row-column row-center-wrapper"
					@click="ToUrl('/distribution/account/log')">
					<view class="img">
						<image class="image"
							src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/071713528247M6kP5r.png"
							mode=""></image>
					</view>
					<view class="item-r">
						<view class="text">
							佣金记录
						</view>
					</view>
				</view>


				<view class="item mb acea-row row-column row-center-wrapper" @click="ToUrl('/lawyer/shere/shere')">
					<view class="img">
						<image class="image"
							src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/341713528274RWX4xS.png"
							mode=""></image>
					</view>
					<view class="item-r">
						<view class="text">
							邀请好友
						</view>
					</view>
				</view>


			</view>





		</view>

	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	export default {
		data() {
			return {
				User: {},
				Team: {},
				Income: {},
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			//邀请码复制
			copyHref() {
				uni.setClipboardData({
					data: this.User.invite_code,
					success: r => {
						uni.showToast({
							icon: 'none',
							title: '邀请码复制成功'
						});
					}
				})
			},
			ToUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			getData() {
				$H.get('distribution/index', {

				}, {
					token: true
				}).then(res => {
					this.User = res.data.user
					this.Team = res.data.team
					this.Income = res.data.income
					if (res.data.user.is_promoter == 0) {
						uni.showToast({
							icon:'none',
							title: '您还没有分销权限'
						})
						setTimeout(() => {
							return uni.reLaunch({
								url: '/distribution/join/join'
							})
						}, 800)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.userinfo-card {
			.card-box {
				width: 100%;
				height: 400upx;
				position: relative;
				z-index: 0;

				.user-section {
					position: absolute;
					top: 0;
					z-index: 10;
					width: 100%;
					padding: 50upx 30upx 210upx;
					display: flex;
					background: linear-gradient(1turn, rgba(233, 51, 35, 0), rgba(233, 51, 35, .2));

					.avatar-wrap {
						width: 100upx;
						height: 100upx;
						border-radius: 50%;
						overflow: hidden;

						.avatar {
							width: 100%;
							height: 100%;
						}
					}

					.portrait-box {
						margin-left: 18upx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.info-box {
							font-size: 38upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #333;
						}

						.tuan {
							display: flex;
							align-items: center;

							.ma {
								font-size: 24upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #333;
							}

							.fuzi {
								width: 64upx;
								height: 34upx;
								background: #CCCCCC;
								border-radius: 15upx;
								font-size: 20upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #333333;
								text-align: center;
								line-height: 34upx;
								margin-left: 10upx;
							}
						}
					}
				}

				.balance-card-wrap {
					width: 100%;
					height: 200upx;
					padding: 0 20upx;
					position: absolute;
					bottom: 0;
					z-index: 10;

					.balance-card {
						width: 100%;
						height: 200upx;
						background: linear-gradient(90deg, #fddeb8 0%, #f9c378 100%);
						border-radius: 20upx;
						padding: 30upx;

						.tit {
							font-size: 32upx;
							font-family: "SemiBold";
							font-weight: bold;
							color: #754202;
						}

						.xia {
							width: 100%;
							display: flex;
							justify-content: space-between;

							.num {
								font-size: 70upx;
								font-family: "SemiBold";
								font-weight: bold;
								color: #754202;
								margin-top: 15px;
							}

							.withdraw-btn {
								width: 150upx;
								height: 60upx;
								line-height: 60upx;
								text-align: center;
								background: #3B3533;
								font-size: 28upx;
								font-family: "SemiBold";
								font-weight: 500;
								color: #F9C378;
								border-radius: 10upx;
							}
						}
					}
				}
			}

		}


		.main {
			padding: 20upx;

			.income-card {
				width: 100%;
				background-color: #fff;
				border-radius: 20upx;
				padding: 30upx;
				margin-top: 20upx;

				.tit {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 32upx;
					line-height: 32upx;
					font-family: "SemiBold";
					font-weight: bold;
					color: #333333;

					image {
						width: 10upx;
						height: 21upx;
					}
				}

				.show-content {
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin-top: 40upx;

					.view-category {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.num {
							font-size: 38upx;
							font-family: "SemiBold";
							font-weight: 800;
							color: #333333;
						}

						.text {
							font-size: 24upx;
							font-family: "SemiBold";
							font-weight: 500;
							color: #999999;
						}
					}

					.line {
						width: 1px;
						height: 65upx;
						background-color: #E6E6E6;
					}
				}
			}

			.tool-card {
				background-color: #ffffff;
				width: 100%;
				padding: 0 30upx;
				margin-top: 20upx;
				border-radius: 20upx;

				.tool-item {
					display: flex;
					flex-direction: row;
					width: 100%;
					height: 100upx;
					align-items: center;
					justify-content: space-between;

					.view-image-left {
						width: 44upx;
					}

					.item-right {
						flex: 1;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;

						.view-text {
							margin-left: 22upx;
							font-size: 28upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #1A1A1A;
						}

						.view-image-right {
							width: 10upx;
							height: 21upx;
						}
					}
				}
			}
		}
	}

	.statistics {
		margin: 10px -10px 0 0;
		border-radius: 12px;
	}

	.acea-row {
		display: flex;
		flex-wrap: wrap;
	}

	.statistics .item {
		width: 172px;
		height: 116px;
		border-radius: 12px;
		margin-right: 10px;
		background-color: #fff;
	}

	.statistics .mb {
		margin-bottom: 10px;
	}

	.acea-row.row-center-wrapper {
		align-items: center;
		justify-content: center;
	}

	.acea-row.row-column {
		flex-direction: column;
	}

	.acea-row {
		display: flex;
		flex-wrap: wrap;
	}

	.statistics .item .img {
		width: 41px;
		height: 41px;
	}

	.statistics .item .img .image {
		width: 100%;
		height: 100%;
	}

	.statistics .item .item-r .text {
		margin-top: 10px;
		font-size: 13px;
		line-height: 18px;
		color: #333;
	}
</style>